<template>
  <view class="app-container">
    <view class="title-padding"></view>
    <view class="empty-page" v-if="cpCategoryList.length === 0">
      <view class="no-fav-card">您还未有关注</view>
      <view class="recommend-fav-card">
        <view class="sub-title">推荐关注指标</view>
        <scroll-view scroll-y="true" class="scroll-h">
          <view
            class="recommend-card"
            v-for="(recommend, index) in recommendList"
            :key="index"
          >
            <view
              class="right-arrow"
              @tap="handleGoToFavPage(recommend)"
            ></view>
            <view class="left-labels grid col-1">
              <view class="big-label">{{ recommend.name }}</view>
              <view class="small-label">理论周期{{ recommend.cycle }}</view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <view class="empty-page" v-if="cpCategoryList.length > 0">
      <view class="no-fav-card">跳转至关注列表中...</view>
    </view>
  </view>
</template>

<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
import {
  getFavCpCategoryList,
  getRecommendPlan,
  getHjhm,
} from '../../api/stars.js'

export default {
  data() {
    return {
      cpCategoryList: [],
      recommendList: [],
    }
  },
  created() {
    this.getFavCateList()
    this.getRecommendList()
  },
  methods: {
    getFavCateList() {
      getFavCpCategoryList().then(res => {
        if (res.code === 1 && res.data) {
          this.cpCategoryList = res.data
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
          })
        }
        if (res.data.length > 0) {
          uni.navigateTo({
            url: '/pages/stars/favList',
          })
        }
      })
    },
    getRecommendList() {
      getRecommendPlan().then(res => {
        if (res.code === 1 && res.data) {
          this.recommendList = res.data
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
          })
        }
      })
    },
    handleGoToFavPage({ caipiao_id, f_zuhe, f_chu, mashu }) {
      uni.navigateTo({
        url: `/pages/stars/recList?recommend=1&maQuantity=${mashu}&maChu=${f_chu}&caipiao_id=${caipiao_id}`,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  background-color: #edf2f6;
}
.app-container {
  width: 100%;
  height: 100vh;
  /* #ifdef H5 */
  height: calc(100vh - var(--window-top));
  /* #endif */
  .empty-page {
    .no-fav-card {
      background-color: #f9faff;
      width: 100%;
      height: 116upx;
      line-height: 116upx;
      padding: 0 28upx;
      font-size: 40upx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
    }
    .recommend-fav-card {
      background-color: #f9faff;
      width: 100%;
      padding: 30upx 28upx;
      margin-top: 8upx;
      height: calc(100vh - 124upx);
      /* #ifdef H5 */
      height: calc(100vh - 124upx - var(--window-top));
      /* #endif */
      .scroll-h {
        height: calc(100vh - 124upx - 150upx);
        /* #ifdef H5 */
        height: calc(100vh - 124upx - var(--window-top) - 150upx);
        /* #endif */
      }
      .sub-title {
        margin-bottom: 22upx;
      }
      .recommend-card {
        width: 100%;
        height: 134upx;
        padding: 20upx;
        background: #ffffff;
        box-shadow: 0px 2px 6px 0px rgba(12, 124, 202, 0.1);
        border-radius: 20upx;
        margin-bottom: 12upx;
        .right-arrow {
          float: right;
          width: 28upx;
          height: 28upx;
          margin-top: 33upx;
          border: 4upx solid #aebec9;
          border-left: 0px;
          border-bottom: 0px;
          transform: translateY(-50%);
          transform: rotate(45deg);
        }
        .left-labels {
          height: 90upx;
          .big-label {
            font-size: 32upx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            // line-height:32upx;
          }
          .small-label {
            font-size: 28upx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(124, 124, 124, 1);
            // line-height:28upx;
          }
        }
      }
    }
  }
}
</style>
